<template>
  <div>
    <van-nav-bar
      title="忘记密码"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        placeholder="请输入手机号码"
        :rules="[{ required: true, message: '请输入手机号码' }]"
      />
      <van-row>
        <van-col span="16"
          ><van-field
            v-model="username"
            name="图片验证码"
            placeholder="请输入图片验证码"
            :rules="[{ required: true, message: '请输入图片验证码' }]"
        /></van-col>
        <van-col span="8"
          ><van-image
            width="100"
            height="50"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
        /></van-col>
      </van-row>

      <van-row>
        <van-col span="16">
          <van-field
            v-model="username"
            name="短信验证码"
            placeholder="请输入短信验证码"
            :rules="[{ required: true, message: '请输入短信验证码' }]"
        /></van-col>
        <van-col span="8"
          ><van-button type="default">获取验证码</van-button></van-col
        >
      </van-row>
      <van-field
        v-model="password"
        type="password"
        name="新密码"
        placeholder="请输入新密码"
        :rules="[
          { required: true, message: '请输入新密码' },
          { validator, message: '密码长度必须为8-20个字符' },
        ]"
      />
      <van-field
        v-model="password"
        type="password"
        name="确认密码"
        placeholder="请再次确认密码"
        :rules="[{ required: true, message: '确认密码与新密码不一致' }]"
      />

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mobile: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    //导航返回按钮
    onClickLeft() {
      this.$router.push("/login");
    },
    //密码函数验证
    validator(val) {
      return /^.{5,20}$/.test(val);
    },
  },
};
</script>
<style>
</style>